<template>
  <div> 
    <div class="line1">
      <!-- 新增 -->
      <div class="line1"> 
        <el-button type="primary" class="el-icon-plus" v-if="userAll.sid == 3 || role == 'manager'" @click="add()">新增充值单</el-button>
      </div> 
      <!--  多条件搜索 -->
      <div class="line1">
        <!-- 日期 -->
        <div class="block">
          <el-date-picker
            v-model="date"
            type="daterange"
            value-format="yyyy-MM-dd 00:00:00"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>
        <div class="line1">
          <el-input v-model="num" placeholder="请输入要查询的充值单号"></el-input>
          <el-button type="primary" @click="search()">搜索</el-button>
          <el-button type="success" class="el-icon-refresh" @click="refresh()" circle></el-button>
          <el-button v-if="(userAll.sid == 3 && (role.endsWith('m') || role.endsWith('x'))) || role == 'manager'" type="primary" @click="generatedExcel" round>导出数据</el-button>
        </div>
      </div>
    </div>
    <!-- 表格 -->
    <div>
      <template>
        <el-table
          :data="tableData"
          stripe
          style="width: 100%">
          <el-table-column
            prop="rechargeNumber"
            label="充值单号"
            align="center"
            width="180">
          </el-table-column>
          <el-table-column
            prop="userName"
            label="客户名称"
            align="center">
          </el-table-column>
          <el-table-column
            prop="rechargeType"
            label="类型"
            align="center">
          </el-table-column>
          <el-table-column
            prop="money"
            label="金额"
            align="center">
          </el-table-column>
          <el-table-column
            prop="adminName"
            label="经办人"
            align="center">
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            align="center">
          </el-table-column>
          <el-table-column
            label="操作"
            width="240"
            align="center">
            <template slot-scope="scope">
              <el-button type="success" class="el-icon-tickets" @click="details(scope.row)"></el-button>
              <el-button type="primary" v-if="userAll.sid == 3 || role == 'manager'" class="el-icon-edit" @click="updateR(scope.row)"></el-button>
              <el-button type="danger" v-if="(userAll.sid == 3 && (role.endsWith('m') || role.endsWith('x'))) || role == 'manager'"  @click="del(scope.row.id)">撤销</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <!-- 分页插件 -->
    <div class="block" style="margin: auto">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page=page
        :page-sizes="[5, 10, 20, 40]"
        :page-size=size
        layout="total, sizes, prev, pager, next, jumper"
        :total=total>
      </el-pagination>
    </div>
    <!-- 查询抽屉 -->
    <div>
      <el-drawer
        title="充值单详情"
        :visible.sync="drawer"
        :direction="direction"
        size='75%'>
        <div>
          <el-descriptions>
            <el-descriptions-item label="客户名称">{{ rowDetail.userName}}</el-descriptions-item>
            <el-descriptions-item label="充值单号">{{rowDetail.rechargeNumber}}</el-descriptions-item>
            <el-descriptions-item label="充值类型">{{rowDetail.rechargeType}}</el-descriptions-item><br>
            <el-descriptions-item label="金额">{{rowDetail.money}}</el-descriptions-item>
            <el-descriptions-item label="经办人">{{rowDetail.adminName}}</el-descriptions-item>
            <el-descriptions-item label="创建时间">{{rowDetail.createTime}}</el-descriptions-item>
            <el-descriptions-item label="原始凭证">
              <el-image 
          style="width: 50px; height: 50px"
          :src=rowDetail.receipt
          :preview-src-list="[rowDetail.receipt,rowDetail.receipt]">
        </el-image>
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <!-- 修改记录 -->
        <h4>修改记录</h4>
        <div>
          <template>
            <el-table
              :data="findUpdate"
              stripe
              style="width: 80%">
              <el-table-column
                prop="rechargeNumber"
                label="充值单号"
                align="center"
                width="180">
              </el-table-column>
              <el-table-column
                prop="userName"
                label="客户名称"
                align="center">
              </el-table-column>
              <el-table-column
                prop="rechargeType"
                label="类型"
                align="center">
              </el-table-column>
              <el-table-column
                prop="money"
                label="金额"
                align="center">
              </el-table-column>
              <el-table-column
                prop="adminName"
                label="经办人"
                align="center">
              </el-table-column>
              <el-table-column
                prop="updateTime"
                label="创建时间"
                align="center">
              </el-table-column>
            </el-table>
          </template>
        </div>
      </el-drawer>
    </div>
    <!-- 对话框 -->
    <div>
      <el-dialog
        title="修改内容"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <el-form ref="form" :model="rowDetail" label-width="80px">
          <el-form-item label="修改金额">
            <el-input v-model=rowDetail.money placeholder="请输入修改的金额"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="commit()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
 export default{
  data(){
    return {
      date:[],
      num:'',
      tableData:[],
      page:1,
      size:5,
      total:0,
      drawer: false,
      direction: 'btt',
      rowDetail:{},
      findUpdate:[],
      dialogVisible: false,
      userAll:{},
      role:'',
      aaa:{
        startTime:'',
        endTime:'',
        rechargeNum:'',
        page:0,
        size:0
      }
    }
  },
  methods:{
     //分页
     handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size = val
      this.getRechargePageData()
    },
    handleCurrentChange(val) {//修改页码时触发
      console.log(`当前页: ${val}`);
      //给当前页属性赋值
      this.page = val
      //发请求获取数据  调用方法
      this.getRechargePageData()
    },
    getRechargePageData: function(){
      if(this.aaa.startTime=='' && this.aaa.rechargeNum == ''){
        this.$axios.get("finance/findRecharge/"+ this.page + "/"+ this.size).then(res => {
        console.log(res.data)
        // 将数据渲染到页面上
        this.tableData = res.data.data.records
        this.total = res.data.data.total
      })
      }else{
        this.$axios.post("finance/conditions",this.aaa).then(res => {
        console.log(res.data);
        this.tableData = res.data.data.records
        this.total = res.data.data.total
        this.date=[]
        this.num=''
        this.aaa.startTime=''
        this.aaa.endTime=''
        this.aaa.rechargeNum=''
      })
      }
      
    },
    //对话框
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
    //添加充值单
    add:function(){
      this.$router.push("/addTopUp")
    },
    //多条件查询
    search(){
      this.aaa={
        startTime:this.date[0],
        endTime:this.date[1],
        rechargeNum:this.num,
        page:this.page,
        size:this.size
      }
        console.log(this.aaa);
        this.getRechargePageData()
    },
    //刷新
    refresh(){
      this.page = 1
      this.getRechargePageData()
    },
    //查看详情
    details(scope){
      this.rowDetail = scope
      this.$axios.get("finance/findUpdate/"+scope.id).then(res => {
          this.findUpdate = res.data.data
      })
      this.drawer = true
    },
    //修改
    updateR(scope){
      this.rowDetail = scope
      this.dialogVisible = true
    },
    //提交修改
    commit(){
      let data={
          id:this.rowDetail.id,
          money:this.rowDetail.money,
          page:1,
          size:this.size
      }
      console.log(data);
      this.$axios.post("finance/updateRecharge",data).then(res => {
        if(res.data.code == 200){
          this.$message.success("修改成功")
          this.dialogVisible = false
        }else{
          // 将数据渲染到页面上
        this.tableData = res.data.data.records
        this.total = res.data.data.total
          this.$message.error("修改失败")
          this.dialogVisible = false
        }
      })
      
    },
    //删除
    del(id) {
        this.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.delete("finance/delRecharge/"+id +"/" + this.page + "/"+this.size).then( res => {
            if(res.data.code == 200){
              this.tableData = res.data.data.records
              this.$message.success("删除成功")
            }else{
              this.$message.error("删除失败,余额不足")
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
 //导出充值明细
 generatedExcel(){
      this.$axios.post("export/rechargeExcel",this.tableData).then(res => {
        if(res.data.code == 200){
            this.$message.success("导出成功")
          }else{
            this.$message.success("导出失败")
          }
      })
    }
  },
  mounted:function(){
    this.getRechargePageData()

    this.$axios.get("/user/findUserByAccount/" + window.localStorage.getItem("account")).then(res => {
        console.log(res.data.data);
        this.userAll = res.data.data;
        this.role = res.data.data.roleList[0].name;
        console.log(this.role);
      });
  }
}
</script>
<style scoped>
.line1{
  display: flex;
}
</style>